<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}

.avatar {
  width: 132px;
  height: 142px;
  display: block;
}

.el-dialog__title {
  font-family: 黑体;
  font-size: 25px;
}

.el-dialog__header {
  text-align: center;
}
</style>

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item style="font-size: 26px;">
        <i class="el-icon-s-home"></i> 管理员个人中心
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div style="margin: 24px 0 12px 0">
      <el-divider></el-divider>
    </div>

    <el-card style="width: auto;height:auto;">
      <!--  描述列表展示  -->
      <el-descriptions :contentStyle="{'text-align':'center'}" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{ adminStandard.admName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            昵称
          </template>
          {{ adminStandard.nickname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture"></i>
            头像
          </template>
          <el-avatar :size="38" shape="circle"
                     :src="adminStandard.avatar==''||adminStandard.avatar==null?'':require('../img/admin/'+adminStandard.avatar)"/>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ adminStandard.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-folder"></i>
            电子邮箱
          </template>
          {{ adminStandard.email }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            权限描述
          </template>
          <el-tag size="medium">
          {{ adminStandard.description }}
            </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :contentStyle="{'text-align':'left'}">
          <template slot="label">
            <i class="el-icon-s-unfold"></i>
            注册时间
          </template>
          <span style="margin-left: 120px">
               {{ adminStandard.gmtCreate }}
            </span>
        </el-descriptions-item>
      </el-descriptions>

      <el-button style="float: left;margin:12px 10px 12px 0" type="primary" @click="updatePass()">修改密码</el-button>
      <el-button style="float: left;margin:12px 0" type="danger" @click="dialogFormVisible = true">修改个人信息</el-button>
    </el-card>

    <!--  修改管理员信息弹窗  -->
    <el-dialog :destroy-on-close="true" title="修改个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="adminUpdateForm" :rules="rules" ref="adminUpdateForm" label-width="100px"
               class="demo-userStandard">
        <el-form-item label="用户名" prop="admName">
          <el-input v-model="adminUpdateForm.admName" placeholder="请输入用户名！"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="adminUpdateForm.nickname" placeholder="请输入昵称！"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="adminUpdateForm.email" placeholder="请输入电子邮箱！"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/admin/upload"
              :on-success="handleSuccess"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload">
            <img v-if="adminUpdateForm.avatar" :src="photoUrl!=''?photoUrl:require('../img/admin/'+adminStandard.avatar)" style="height: 110px;width: 150px;display: block"
                 class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="adminUpdateForm.phone" placeholder="请输入手机号！"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" style="float: right;margin-top:-40px">
        <el-button type="primary" @click="submitForm('adminUpdateForm')">提交</el-button>
        <el-button @click="resetForm('adminUpdateForm')">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoUrl:'',
      adminStandard: {},
      adminUpdateForm: {
        admName: '',
        nickname: '',
        avatar: '',
        phone: '',
        email: ''
      },
      rules: {
        admName: [
          {required: true, message: '请输入2-10位中文、英文、数字但不包括下划线等符号的用户名！', trigger: 'blur'},
        ],
        nickname: [
          {required: true, message: '请输入2-10位中文、英文、数字但不包括下划线等符号的昵称！', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '手机号码格式不正确,请输入1-11位数字的手机号!', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入正确的邮箱格式！', trigger: 'blur'},
        ],
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log("需要移除的文件是"+file, fileList);
      console.log("需要移除的uuid值是"+file.response);
      let url = 'http://localhost:8081/admin/uploadDelete/uuid=' + file.response;
      console.log('执行图片撤销的请求路径是：'+url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify.success({
            title: '提示',
            message: '撤销图片成功！',
            showClose: true,
            position: 'top-right'
          });
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      });
    },
    handleSuccess(response,file) {//图片上传成功后
      console.log(response);
      this.adminUpdateForm.avatar = response;
      this.photoUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    //修改管理员信息
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = "http://localhost:8081/admin/updateCurrent";
          let formData = this.qs.stringify(this.adminUpdateForm);
          console.log('完善信息数据是：' + formData);
          this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$notify.success({
                title: '提示',
                message: '修改个人信息成功!',
                showClose: true,
                position: 'top-right'
              });
              window.location.reload();
            } else {
              this.$notify.warning({
                title: '提示',
                message: responseBody.message,
                showClose: true,
                position: 'top-right'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //跳转修改密码
    updatePass() {
      this.$router.push('/sys-admin/updatePass');
    },

    //加载管理员信息
    loadAdmin() {
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get("http://localhost:8081/admin/currentAdmin").then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.adminStandard = responseBody.data;
          this.adminUpdateForm.admName = this.adminStandard.admName;
          this.adminUpdateForm.nickname = this.adminStandard.nickname;
          this.adminUpdateForm.avatar = this.adminStandard.avatar;
          this.adminUpdateForm.phone = this.adminStandard.phone;
          this.adminUpdateForm.email = this.adminStandard.email;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.loadAdmin();
  }
}
</script>

